<template>
  <view class="remark_textInput">
    <u--textarea v-model="remark" placeholder="请填写备注信息" height="317rpx" border="none" maxlength="100"
      count></u--textarea>
  </view>
  <view class="remark_title"> 快捷输入 </view>
  <view class="remark_tip">
    <block v-for="(item, index) in list" :key="index">
      <view @click="get_tip(item)">{{ item }}</view>
    </block>
  </view>
  <view class="remark_finish" @click="finish">完成</view>
</template>

<script>
  export default {
    data() {
      return {
        remark: "",
        list: [
          "请放门把手上",
          "请放门口",
          "请放前台桌上",
          "如地址封闭管理，请电话与我联系",
        ],
      };
    },
    methods: {
      get_tip(item) {
        const remarkLength = this.remark + item + ",";
        if (remarkLength.length < 100) {
          this.remark = this.remark + item + ",";
        } else {
          uni.showToast({
            title: "备注信息不能超过100字",
            icon: "none",
            duration: 2000,
          });
        }
      },
      finish() {
        if (this.remark) {
          uni.setStorageSync("remark", this.remark);
          uni.showLoading({
            title: "加载中",
          });
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateBack({
              delta: 1,
            });
          }, 600);
        } else if (this.remark == "") {
          uni.showToast({
            title: "备注信息不能为空",
            icon: "none",
            duration: 2000,
          });
        }
      },
    },
    onShow() {
      if (uni.getStorageSync("remark")) {
        this.remark = uni.getStorageSync("remark");
      }
    },
    onLoad() {},
  };
</script>

<style>
  page {
    background-color: #f0f8fa;
    font-size: 28rpx;
  }

  .remark_textInput {
    width: 92%;
    height: 317rpx;
    margin: 30rpx auto;
    background-color: #fff;
  }

  .remark_title {
    width: 92%;
    height: 60rpx;
    line-height: 100rpx;
    color: #666;
    margin: 30rpx auto;
  }

  .remark_tip {
    display: flex;
    flex-wrap: wrap;
    width: 92%;
    margin: 0 auto;
  }

  .remark_tip view {
    height: 60rpx;
    line-height: 60rpx;
    justify-content: space-between;
    border: 1rpx solid #adb838;
    background-color: #fff;
    color: #adb838;
    text-align: center;
    padding: 0 15rpx;
    margin-bottom: 30rpx;
    margin-right: auto;
  }

  .remark_finish {
    width: 75%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background-color: #adb838;
    border-radius: 45rpx;
    margin: 60rpx auto 0;
  }
</style>